<div class="clr-row">
    <div class="clr-col-12 ">
        <div class="card">
            <div class="card-block">
                <div class="clr-row">
                    <div class="clr-col-3">
                        <div class="clr-row">
                            <div class="clr-col-md-12" style="text-align: center">
                                <h4>{{'APP_BASIC_INFORMATION'|translate}}</h4> <br>
                            </div>
                            <div class="clr-col-lg-6  clr-col-12 count">
                                <span><b>{{'APP_NAME'|translate}}</b></span> <br>
                                <span><b>{{'APP_VERSION'|translate}}</b></span> <br>
                                <span><b>{{'APP_ARCHITECTURE'|translate}}</b></span> <br>
                                <span><b>{{'APP_NETWORK_TYPE'|translate}}</b></span> <br>
                                <div *ngIf="currentCluster.source === 'local'">
                                    <span><b>{{'APP_NETWORK_MODE'|translate}}</b></span> <br>
                                    <span><b>proxy {{"APP_MODE"|translate}}</b></span> <br>
                                </div>
                                <span><b>{{'APP_CONTAINER_RUNTIME_TYPE'|translate}}</b></span> <br>
                                <span><b>{{'APP_SOURCE'|translate}}</b></span> <br>
                            </div>
                            <div class="clr-col-lg-6 clr-col-12 type-face">
                                <span>{{currentCluster.name}}</span> <br>
                                <span>{{currentCluster.spec.version}}</span> <br>
                                <span>{{currentCluster.spec.architectures}}</span> <br>
                                <span>{{currentCluster.spec.networkType}}</span> <br>
                                <div *ngIf="currentCluster.source === 'local'">
                                    <div *ngIf="currentCluster.spec.networkType === 'flannel'">
                                        <span>{{currentCluster.spec.flannelBackend}}</span> <br>
                                    </div>
                                    <div *ngIf="currentCluster.spec.networkType === 'cilium'">
                                        <div *ngIf="currentCluster.spec.flannelBackend === 'Overlay'">
                                            <span>{{currentCluster.spec.flannelBackend}} - {{currentCluster.spec.ciliumTunnelMode}}</span> <br>
                                        </div>
                                        <div *ngIf="currentCluster.spec.flannelBackend === 'Native Routing'">
                                            <span>{{currentCluster.spec.flannelBackend}}</span> <br>
                                        </div>
                                    </div>
                                    <div *ngIf="currentCluster.spec.networkType === 'calico' && currentCluster.spec.calicoIpv4PoolIpip === 'off'">
                                            <span>bgp</span><br>
                                    </div>
                                    <div *ngIf="currentCluster.spec.networkType === 'calico' && currentCluster.spec.calicoIpv4PoolIpip === 'Always'">
                                        <span>ipip</span><br>
                                    </div>
                                
                                    <span>{{currentCluster.spec.kubeProxyMode}}</span> <br>
                                </div>
                                <span>{{currentCluster.spec.runtimeType}}</span> <br>
                                <span>{{currentCluster.source | translate}}</span> <br>
                            </div>
                        </div>
                    </div>
                    <div class="clr-col-6 solid">
                        <div class="clr-col-md-12" style="text-align: center">
                            <h4>{{'APP_CAPACITY_INFORMATION'|translate}}</h4> <br>
                        </div>
                        <div class="clr-col-md-12" style="text-align: center">
                            <circle-progress
                                    [percent]="cpuUsagePercent"
                                    [radius]="80"
                                    [outerStrokeWidth]="15"
                                    [innerStrokeWidth]="15"
                                    [space]="-15"
                                    [outerStrokeColor]="'#00af00'"
                                    [innerStrokeColor]="'#e5e9f2'"
                                    [titleFontSize]=20
                                    [unitsFontSize]=20
                                    [subtitleFontSize]="15"
                                    [subtitle]="'CPU 使用率'"
                            ></circle-progress>
                            <circle-progress
                                    [percent]="memUsagePercent"
                                    [radius]="80"
                                    [outerStrokeWidth]="15"
                                    [innerStrokeWidth]="15"
                                    [space]="-15"
                                    [outerStrokeColor]="'#00af00'"
                                    [innerStrokeColor]="'#e5e9f2'"
                                    [titleFontSize]=20
                                    [unitsFontSize]=20
                                    [subtitleFontSize]="15"
                                    [subtitle]="'内存 使用率'"
                            ></circle-progress>
                            <circle-progress
                                    [percent]="podUsagePercent"
                                    [radius]="80"
                                    [outerStrokeWidth]="15"
                                    [innerStrokeWidth]="15"
                                    [space]="-15"
                                    [outerStrokeColor]="'#00af00'"
                                    [innerStrokeColor]="'#e5e9f2'"
                                    [titleFontSize]=20
                                    [unitsFontSize]=20
                                    [subtitleFontSize]="15"
                                    [subtitle]="'容器组'"
                            ></circle-progress>
                        </div>
                    </div>
                    <div class="clr-col-3 solid">
                        <div class="clr-row">
                            <div class="clr-col-md-12" style="text-align: center">
                                <h4>{{'APP_STATISTICS'|translate}}</h4> <br>
                            </div>
                            <div class="clr-col-lg-6 clr-col-12 count">
                                <span><b>{{nodes.length}}</b></span> <br>
                                <span><b>{{namespaces.length}}</b></span> <br>
                                <span><b>{{deployments.length}}</b></span> <br>
                                <span><b>{{pods.length}}</b></span> <br>
                                <span><b>{{containerNumber}}</b></span> <br>
                            </div>
                            <div class="clr-col-lg-6 clr-col-12 type-face">
                                <span>Nodes</span> <br>
                                <span>Namespaces</span> <br>
                                <span>Deployments</span> <br>
                                <span>Pods</span> <br>
                                <span>Containers</span> <br>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer" *ngIf="currentCluster.source==='local'">
                <button class="btn btn-sm" (click)="downloadKubeConfig()">{{'APP_DOWNLOAD'|translate}}KubeConfig
                </button>
            </div>
        </div>
    </div>
</div>
<app-webkubectl [currentCluster]="currentCluster"></app-webkubectl>